<template>
  <div class="WriteOffRecord_evaluate">
    <c-title text="评价"></c-title>
    <div class="project">
      <div class="imag">
        <img :src="project.project_thumb" alt="" />
      </div>
      <div class="contenBox">
        <div class="name">{{ project.project_name }}</div>
        <div class="sotre">核销门店：{{ store_name }}</div>
      </div>
    </div>
    <div class="topic">
      <div class="topic_lis" v-for="(item, index) in info" :key="index">
        <div class="Title">{{ index + 1 }}.{{ item.name }}</div>
        <div class="select">
          <van-radio-group v-model="chhild[index]" @change="changeGroup($event, index)">
            <div class="line" v-for="(child, ind) in item.has_many_answer" :key="ind">
              <van-radio :disabled="islook" checked-color="#FE5E56" :name="child.id">{{ child.answer }}</van-radio>
            </div>
          </van-radio-group>
        </div>
      </div>
    </div>
    <div class="btnSub set-pc-style" v-if="!islook">
      <div class="sub" @click="confirm">提交评价</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: [],
      answer: [],
      chhild: [],
      project: [],
      store_name: "",
      islook: false,
      isclick:false
    };
  },
  activated() {
    if (this.$route.params.look) {
      this.islook = true;
      // 查看评价
      this.recordList();
    } else {
      this.getData();
    }
  },
  methods: {
    async confirm() {
      if(this.isclick) return
      this.isclick = true;
      setTimeout(() => {
        this.isclick = false;
      }, 1000);
      let obj = {};
      this.answer.forEach((ele, ind) => {
        obj[ele.id] = ele.options;
      });
      // 提交评价必填验证
      for (let i = 0; i < this.info.length; i++) {
        if (!obj[this.info[i].id]) {
          this.$toast(`请勾选第${i + 1}题评价`);
          break;
        }
      }
      let { msg, data, result } = await $http.post("plugin.store-projects.frontend.comment.submit", { log_id: this.$route.params.id, question_list: obj }, ".");
      if (!result) return this.$toast(msg);
      this.islook = true;
      // 查看评价
      this.recordList();
      this.$toast(msg);
    },
    changeGroup(e, index) {
      this.answer[index].options = e;
    },
    async recordList() {
      let { msg, data, result } = await $http.post("plugin.store-projects.frontend.comment.detail", { log_id: this.$route.params.id }, ".");
      if (!result) return this.$toast(msg);
      this.project = {
        project_name: data.project_name,
        project_thumb: data.project_thumb
      };
      this.store_name = data.store_name;
      this.info = data.data;
      this.info.forEach((ele, ind) => {
        this.chhild[ind] = ele.select_value;
      });
    },
    async getData() {
      let { msg, data, result } = await $http.post("plugin.store-projects.frontend.comment.index", { log_id: this.$route.params.id }, ".");
      if (!result) return this.$toast(msg);
      this.info = data.question_list;
      this.project = data.project;
      this.store_name = data.store_name;
      this.info.forEach((ele, ind) => {
        this.answer[ind] = {};
        this.answer[ind].id = ele.id;
        this.answer[ind].options = "";
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.WriteOffRecord_evaluate {
  padding-bottom: 5rem;
  .btnSub {
    position: fixed;
    bottom: 1.25rem;
    left: 0;
    width: 100%;
    padding: 0 0.75rem;
    .sub {
      background: #f15353;
      border-radius: 0.5rem;
      font-size: 0.94rem;
      color: #ffffff;
      font-weight: 500;
      text-align: center;
      padding: 0.72rem 0;
    }
  }
}
.topic {
  padding: 1.25rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  .topic_lis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.9rem;
    .Title {
      font-weight: 500;
      font-size: 0.94rem;
      text-align: left;
    }
    .select {
      display: flex;
      flex-direction: column;
      .line {
        margin-top: 0.94rem;
        text-align: left;
      }
    }
  }
  .topic_lis:last-child {
    margin-bottom: 0;
  }
}
.project {
  margin: 0.63rem 0.75rem;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.63rem;
  box-sizing: 0;
  display: flex;
  justify-content: space-between;
  .contenBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .name {
      font-weight: 500;
      font-size: 0.88rem;
    }
    .sotre {
      font-size: 0.81rem;
    }
  }
  .imag {
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem;
    background: #d6d6dc;
    border-radius: 0.63rem;
    margin-right: 0.5rem;
    img {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 0.63rem;
    }
  }
}
</style>
